import React, { useState, useEffect } from 'react'
import Mask from '@/components/Mask'
import { View, Button, Input } from '@tarojs/components'
import { backgroundObj } from '@/utils/utils'
import { fetchListSubjectForCustomer } from '@/server/shop'
import Router from '@/utils/router'
import './index.scss'
const SelectAccount = (props) => {
    const { show, onClose } = props
    const [list, setList] = useState([])
    const [active, setActive] = useState(null)
    const fetchListSubject = () => {
        fetchListSubjectForCustomer().then(val => {
            const { subjectList } = val
            setList(subjectList)
        })
    }
    useState(() => {
        fetchListSubject()
    }, [])
    useEffect(() => {
        if (!show) {
            setActive(null)
        }
    }, [])
    return <Mask
        {...props}>
        <View className='Drawer_SelectAccount_box'>
            <View className='Drawer_SelectAccount_title'>选择你的疑问学科</View>
            <View className='Drawer_SelectAccount_list'>
                {list.map((item, index) => {
                    const { cover, subjectName, id } = item
                    return <View key={index} onClick={() => { setActive(id) }} className={`Drawer_SelectAccount_item ${active === id ? 'Drawer_SelectAccount_select' : ''}`}>
                        <View>
                            <View style={backgroundObj(cover)} className='Drawer_SelectAccount_icon'>

                            </View>
                            <View className='Drawer_SelectAccount_font'>
                                {subjectName}
                            </View>
                        </View>

                    </View>
                })}

                <View className='Drawer_SelectAccount_item Drawer_SelectAccount_select'>
                    <View>
                        <View className='Drawer_SelectAccount_icon Drawer_SelectAccount_iconStyle2'>

                        </View>
                        <View className='Drawer_SelectAccount_font'>
                            英语
                        </View>
                    </View>

                </View>
                <View className='Drawer_SelectAccount_item Drawer_SelectAccount_select'>
                    <View>
                        <View className='Drawer_SelectAccount_icon Drawer_SelectAccount_iconStyle3'>

                        </View>
                        <View className='Drawer_SelectAccount_font'>
                            大学语文
                        </View>
                    </View>

                </View>
            </View>
            <View className='Drawer_SelectAccount_btnBox'>
                <View className='Drawer_SelectAccount_btn1' onClick={() => { onClose() }}>取消</View>
                <View onClick={() => {
                    Router('submitReservation', { args: { type: 'online' } })
                }} className='Drawer_SelectAccount_btn2'>确定</View>
            </View>
        </View>
    </Mask>
}
export default SelectAccount